<template>
  <div class="firstPage">

    <div class="Pagetop">
    <van-search v-model="value"
     label="上海"
     placeholder="备用金:你的紧急零用钱"
     background="#1479ff" >
     <template #action>
       <div @click="onSearch" class="top-right">右边</div>
      </template>
    </van-search>
   </div>
        <div class="page-min">
             <van-grid :column-num="5">
              <van-grid-item v-for="(item, id) in localList" :key="id" 
              :icon=item.img :text=item.name 
              @click="go(item.id)" />
             
            </van-grid>
        </div>
      
  </div>
</template>

<script>
import  axios  from "../request/http";
export default {
 data() {
    return {
      value: '',
      localList:[],
    };
  },
  created(){
    axios.get('/getList')
     .then(data => {
       console.log(data.data);
       this.localList= data.data
     })
     
  },
  methods: {
    go(id) {
      console.log(id);

      if (id = 14) {
        this.$router.push({ name: 'main' })
      }
    }
  },
}
</script>

<style lang="scss" scoped>

.firstPage{
  .top-left{
  width: 80px;
  height: 40px; 
 }
 .page-min{
   
  :deep(.van-grid) {

      :deep(.van-grid-item){
       background: #1479ff;
    }

   }
 }
 .page-mind{
  // display: flex;
  // width: 750px;
  // height: 400px;
  :deep(.van-grid){
    width: 40px;
    height: 40px;
  }
  
 }

}


</style>